<!--
* Created by Sean on 2017/10/1.
* User Info
-->
<template>
  <div id="userInfo" class="user-info">
    <group>
      <cell title="头像"><img class="avatar" :src="avatarUrl"/></cell>
      <cell title="昵称" :value="nickname || userInfo.nickName || ''"></cell>
      <cell title="姓名" :value="userInfo.trueName || ''"></cell>
      <cell title="身份证号" :value="userInfo.idCard || ''"></cell>
      <cell title="性别" :value="this.gender"></cell>
      <cell title="手机号" :value="userInfo.mobile || ''"></cell>
    </group>
  </div>
</template>
<script>
  import { Group, Cell } from 'vux'
  export default {
    name: 'userInfo',
    components: {
      Group,
      Cell
    },
    created () {
      let imgUrl = localStorage.getItem('headUrlImg')
      let nickName = localStorage.getItem('nickName')
      !imgUrl || imgUrl === 'undefined' ? this.avatarUrl = require('../../images/avatar_default.png') : this.avatarUrl = imgUrl
      !nickName || nickName === 'undefined' ? this.nickname = '' : this.nickname = nickName
      this.userInfo = JSON.parse(localStorage.getItem('userInfo')) || {}
      // this.gender = this.userInfo.sex === 1 ? '男' : (this.userInfo.sex === 2 ? '女' : (this.userInfo.sex === 3 ? '未知' : ''))
      this.gender = parseInt(this.userInfo.idCard[16]) & 1 ? '男' : '女'
    },
    data () {
      return {
        avatarUrl: '',
        nickname: '',
        userInfo: {},
        gender: ''
      }
    }
  }
</script>
<style lang="less">
  #app {
    background: #f2f5fb;
  }
  .user-info {
    .weui-cells {
      margin-top: 0;
    }
    .weui-cells:before {
      border: none;
    }
    .avatar {
      width: 1.2rem;
      height: 1.2rem;
      border-radius: 100%;
      vertical-align: middle;
    }
  }
</style>
